<!DOCTYPE html>
<html>
<head>
<script src="media-file.js"></script>
<style>
  .filter {
    -webkit-filter: blur(2px);
  }

  video {
    outline: 15px solid blue;
    border: 15px solid green;
    background: orange;
    padding: 15px;
    margin: 20px;
    width: 300px;
  }
</style>
</head>

<body>
  <!-- This test passes if
    1) the video content and its surrounding borders are blurred
    2) the final colored blocks in the series of colored blocks in the
       video content box area are respectively: cyan, blue, green
    3) the video seek point is near 00:00:00.24 -->
  <video/>
</body>

<script>
window.onload = function() {
  var video = document.querySelector('video');

  video.addEventListener('seeked', function() {
    video.classList.add('filter');
    if (window.testRunner)
      setTimeout(function() { testRunner.notifyDone() }, 0);
    video.pause();
  }, false);

  setSrcByTagName('video', 'content/test.ogv');
  seek(video, 1.0);
};

function seek(video, time) {
  video.currentTime = time;
}

if (window.testRunner)
  testRunner.waitUntilDone();
</script>
</html>
